<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        ul,ol,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .banner img{width: 590px;height: 470px;}
        .banner{
            width: 590px;
            height: 470px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .banner ul{
            position: absolute;
            width: 3600px;
            height: 470px;
        }
        .banner ul li{
            float: left;
            width: 590px;
            height: 470px;
        }
        .banner ul li a{
            display: inline-block;
            width: 590px;
            height: 470px;
        }

        .circle{
            position: absolute;
            left: 0;
            bottom: 20px;
            width: 590px;
            height: 20px;
            background-color: royalblue;
            text-align: center;
            line-height: 20px;
        }
        .circle span{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
            cursor: pointer;
        }
        .next{
            position: absolute;
            top: 50%;
            margin-top: -25px;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: skyblue;
            line-height: 50px;
            font-size: 25px;
            text-align: center;
            cursor: pointer;
        }
        .prev{
            position: absolute;
            top: 50%;
            margin-top: -25px;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: skyblue;
            line-height: 50px;
            font-size: 25px;
            text-align: center;
            cursor: pointer;
        }
        .circle span.on{
            background-color: orange;
        }
        .circle span:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul>
            <li>
                <a href="#"><img src="img/banner_1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/banner_2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/banner_3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/banner_4.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/banner_5.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/banner_6.jpg" alt=""></a>
            </li>
        </ul>
        <!-- 小圆点 -->
        <div class="circle">
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

        <div class="next">></div>
        <div class="prev"><</div>
    </div>
    <script>

        $(function(){
        var inw=$(".banner ul li:first").innerWidth();
        // console.log(inw);
        var n=0;
        timer=0;
        timer=setInterval(function(){
           play();
        },1500)
        // 鼠标经过
        // $('.banner li a,.next,.prev').mouseover(function(){
        //     clearInterval(timer);
        // });
        // $('.banner li a,.next,.prev').mouseleave(function(){
        //     timer=setInterval(function(){
        //         play();
        //     },1500)
        // })
        $('.banner li a,.next,.prev,span').hover(function(){
            clearInterval(timer);
        },function(){
            timer=setInterval(function(){
                play();
            },1500)
        })

		



        function play(){
            $(".banner ul").stop().animate({left:-inw},function(){
                $(this).css("left",0).find("li:first").appendTo(this);
            })
            n++;
            // console.log(n);
            if(n>$(".banner ul li").length-1){
                n=0;
            }
            // $(".circle span").eq(n).css("background","orange").siblings().css("background","white")
            $(".circle span").eq(n).addClass("on").siblings().removeClass("on");
        }
        $(".next").click(function(){
            play();
        })
        $(".prev").click(function(){
            $(".banner ul").css("left",-inw).find("li:last").prependTo(".banner ul");
            $(".banner ul").stop().animate({left:0})

            n--;
            if(n<0){
                n=$(".banner ul li").length-1;
            }
           // $(".circle span").eq(n).css("background","orange").siblings().css("background","white")
            $(".circle span").eq(n).addClass("on").siblings().removeClass("on");
        })
        // 小圆点
        $(".circle span").each(function(index){
            $(this).click(function(){
                if(n<index){   
                    for(var i=n;i<index;i++){
                        $(".banner ul").animate({left:-inw},100,function(){
                        $(this).css("left",0).find("li:first").appendTo(this);
                        })
                    }

                }else if(n>index){
                    for(var i=n;i>index;i--){
                        $(".banner ul").css("left",-inw).find("li:last").prependTo(".banner ul");
                        $(".banner ul").animate({left:0},100)
                    }
                }
                    n=index;
                   $(".circle span").eq(n).addClass("on").siblings().removeClass("on");
                // $(".circle span").eq(n).css("background","orange").siblings().css("background","white")
            })
        })
            
       







        // console.log($(".banner ul li").length-1);
        })
       



    </script>


</body>
</html>